import { fetchAllMenu, MenuApi } from '@/api/userCenter/system/menu'
import { MenuLevel } from '@/api/userCenter/system/model/menuModel'
import { useStore } from '@/store'
import { computed, reactive } from 'vue'
import { MenuTypeMap, TableStateWrapper } from '../types'

const useSearchMenu = () => {
  const store = useStore()
  const tableStateWrapper = reactive<TableStateWrapper>({
    selectedRowKeys: [],
    tableSize: 'small',
    tableData: [],
    tableColumns: [
      {
        title: '名称',
        dataIndex: 'name',
      },
      {
        title: 'ID',
        dataIndex: 'id',
      },
      {
        title: '图标',
        dataIndex: 'icon',
        slots: {
          customRender: 'icon',
        },
      },
      {
        title: '级别',
        dataIndex: 'level',
        customRender: (row) => {
          const menuTypeMap: MenuTypeMap = {
            1: '应用',
            2: '菜单',
            3: '页面',
            4: '按钮',
          }
          return menuTypeMap[row.text as MenuLevel]
        },
      },
      {
        title: '权限标识',
        dataIndex: 'code',
      },
      {
        title: '路由地址',
        dataIndex: 'path',
      },
      {
        title: '菜单状态',
        dataIndex: 'enabled',
        slots: {
          customRender: 'menuState',
        },
      },
      {
        title: '创建时间',
        dataIndex: 'createTime',
      },
      {
        title: '更新时间',
        dataIndex: 'updateTime',
      },
      {
        title: '操作',
        dataIndex: 'options',
        width: 150,
        slots: {
          customRender: 'operate',
        },
      },
    ],
  })

  const getMenuList = async () => {
    const { data } = await fetchAllMenu()
    tableStateWrapper.tableData = data
  }
  const isGetMenuListLoading = computed(() =>
    store.getters['global/isOpLoading'](MenuApi.LIST)
  )

  return {
    tableStateWrapper,
    getMenuList,
    isGetMenuListLoading,
  }
}

export default useSearchMenu
